<template>
	<view>
		<view class="tab">
			<u-tabs active-color="#F3060D" :list="tabList" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<scroll-view class="list" scroll-y>
			<view class="item" v-for="(item, index) in 10" :key="index">
				<view class="l">
					标签名
				</view>
				<view class="r">
					<u-button size="mini" :custom-style="customStyleEdit">编辑</u-button>
					<u-button size="mini" :custom-style="customStyleDelete">删除</u-button>
				</view>
			</view>
		</scroll-view>
		
		<u-popup v-model="addbox" mode="bottom">
			<view class="input-box">
				<view class="title">
					<view class="l" style="opacity: 0;">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
					<view class="c">
						添加标签
					</view>
					<view class="r" @click="addbox = false">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="input">
					<u-form-item label="标签名称" labelWidth="120">
						<u-input v-model="value" />
					</u-form-item>
					<u-form-item v-if="current == 1" label="选择商品" labelWidth="120">
						<u-input disabled type="select" v-model="value" @click="selectShow = true" />
					</u-form-item>
				</view>
				<view class="btns">
					<u-button shape="circle" :custom-style="submitStyle" @click="addbox = false">完成</u-button>
					<u-button shape="circle" :custom-style="cancelStyle" @click="addbox = false">取消</u-button>
				</view>
			</view>
		</u-popup>
		
		<view class="btn" @click="addbox = true">
			添加标签
		</view>
		
		<u-select v-model="selectShow" :list="selectlist" confirm-color="#F3060D"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectlist: [
					{
						value: '1',
						label: '商品1'
					},
					{
						value: '2',
						label: '商品2'
					}
				],
				selectShow: false,
				value: '',
				addbox: false,
				submitStyle: {
					color: '#FFF',
					background: '#F3060D',
					width: '334rpx'
				},
				cancelStyle: {
					color: '#F3060D',
					marginLeft: '20rpx',
					width: '334rpx'
				},
				customStyleEdit: {
					color: '#FFF',
					background: '#F3060D'
				},
				customStyleDelete: {
					color: '#F3060D',
					marginLeft: '20rpx'
				},
				tabList: [{
						name: '手动标签'
					},
					{
						name: '自动标签'
					}
				],
				current: 0
			};
		},
		methods: {
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.input-box {
		// height: 463rpx;
		padding: 0 31rpx 50rpx;
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 120rpx;
		}
		::v-deep .u-form-item {
			border-top: 1rpx solid #f2f3f6;
		}
		.title {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.c {
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
	.btn {
		position: fixed;
		bottom: 46rpx;
		left: 37rpx;
		width: 678rpx;
		height: 88rpx;
		border-radius: 44.5rpx;
		background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-weight: 32rpx;
		color: #FFF;
	}
	.list {
		padding: 20rpx 20rpx;
		height: calc(100vh - 82rpx);
		box-sizing: border-box;

		.item {
			padding: 20rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.r {
				display: flex;
			}
			.l {
				font-weight: 500;
				font-weight: 28rpx;
				color: #1E1E1E;
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F7;
	}
</style>